<template>
	<view class="category-detail-container">
		<top-title-text @closeBtn="closeBtn" titleText="分类"></top-title-text>
		<name-icon-color ref="nameIconColor" @openIconDialog="changeFlag('isShowIcon', true)" @openColorDialog="changeFlag('isShowColor', true)" :accountbook="categoryDetail" @changeAccountbook="changeAccountbook" @changeType="changeType"></name-icon-color>
		<confirm-btn style="width: 100%;" :showDeleteFlag="type == 'update'" @confirm="confirm"></confirm-btn>
		<!-- 颜色组件弹框 -->
		<u-popup :show="isShowColor" :round="20"  mode="center" @close="changeFlag('isShowColor', false)" @open="changeFlag('isShowColor', true)">
			<color :selectIndex="categoryDetail.colorIndex" @selectColor="selectColor"></color>
		</u-popup>
		<!-- 图标组件弹框 -->
		<u-popup :show="isShowIcon" :round="20"  mode="center" @close="changeFlag('isShowIcon', false)" @open="changeFlag('isShowIcon', true)">
			<my-icon @selectIcon="selectIcon" :iconIndex="categoryDetail.iconIndex" :categoryIndex="categoryDetail.categoryIndex" ></my-icon>
		</u-popup>
	</view>
</template>
<script>
	import color from '@/components/color/color/color.vue';
	import myIcon from '@/components/icon/my-icon.vue';
	import confirmBtn from '@/components/confirm-btn/confirm-btn';
	import nameIconColor from '@/components/name-icon-color/name-icon-color.vue';
	import topTitleText from '@/components/top-title-text/top-title-text.vue';
	export default {
		components: {
			confirmBtn, topTitleText, nameIconColor, color, myIcon
		},
		props: {
			// 包括id,名字，图标，背景色，预算，
			categoryDetail: {
				type: Object,
				default: () => {}
			}
		},
		name: 'category',
		data() {
			return {
				categoryIndex: -1,															// 选择图标所在的分类索引
				iconIndex: -1,																// 图标所在分类集合中的索引
				type: '',																	// 类型
				isShowColor: false,															// 展示颜色选择组件
				isShowIcon: false,															// 展示图标选择组件
				selectColorIndex: 0,														// 测试使用，一开始选中的颜色
			};
		},
		methods: {
			/**
			 * 确定
			 */
			confirm() {
				console.log(this.categoryDetail, "categoryDetail");
				this.$emit('categoryDetailConfirm', this.categoryDetail);
			},
			/** 切换类型时回调
			 * @param {Object} type 类型 pay | income
			 */
			changeType(type) {
				this.categoryDetail.type = type;
				this.$refs.nameIconColor.$forceUpdate();
			},
			/** 选择图标函数
			 * @param {Object} index1 分类索引
			 * @param {Object} index2 分类下图标索引
			 */
			selectIcon(index1, index2) {
				// this.categoryIndex = index1;
				// this.iconIndex = index2;
				this.categoryDetail.categoryIndex = index1;
				this.categoryDetail.iconIndex = index2;
				this.categoryDetail.icon = this.iconCategoryList[index1].list[index2].icon;
				this.$refs.nameIconColor.$forceUpdate();
				this.changeFlag('isShowIcon', false);
				console.log(this.categoryDetail.icon, 'this.accountbook.icon');
			},
			/** 选中颜色回调
			 * @param {Object} item 对象
			 * @param {Object} index 索引
			 */
			selectColor(item, index) {
				this.categoryDetail.bgcColor = item.bgcColor;
				// 因为第一个是加进去的，所以需要将索引
				this.categoryDetail.colorIndex = index;
				// 刷新，否则选中有值后不会显示
				this.$refs.nameIconColor.$forceUpdate();
				// 因为第一个是加进去的，所以需要将索引
				this.selectColorIndex = index;
				this.changeFlag('isShowColor', false);
			},
			/** 根据名字切换状态
			 * @param {Object} name 名字
			 * @param {Object} flag 状态
			 */
			changeFlag(name, flag) {
				this[name] = flag;
			},
			/**
			 * 点击 x 关掉弹框事件
			 */
			closeBtn() {
				this.$emit("closeCategoryDetail");
			},
			/** 当名称，图标，颜色，预算发生改变后回调
			 * @param {Object} obj 账本对象
			 */
			changeAccountbook(obj) {
				this.categoryDetail.name = obj.name;
				this.categoryDetail.budget = obj.budget;
				console.log(this.categoryDetail);
			},
		},
		mounted(){
			// 如果直接调佣会存在 categoryList为空的情况
			this.categoryDetail = JSON.parse(JSON.stringify(this.categoryDetail));
		},
	};
</script>
<style scoped lang="scss">
	// 高度有遍历的时候，分类决定
	.category-detail-container {
		width: 100%;
		height: 1320rpx;
		padding: 20rpx 20rpx;
		box-sizing: border-box;
		display: flex;
		flex-direction: column;
		
		.btn-components-container {
			width: 100%;
			height: 40%;
		}
	}
</style>
